<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/assets/images/index/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../css/cart_style.css" th:href="@{/assets/css/cart_style.css}">

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/assets/css/daterangepicker-bs3.css}">
    <script type="text/javascript" th:src="@{/assets/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/assets/js/moment.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/daterangepicker.js}"></script>

    <title>请支付订单</title>
    <style type="text/css">
        body, table1 {
            font-size: 12px;
        }

        table1 {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 10px auto;
        }

        td {
            height: 50px;
        }

        h1, h2, h3 {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .table1 {
            border: 0px solid #cad9ea;
            color: #666;
        }

        .table1 th {
            background-repeat: repeat-x;
            height: 50px;
        }

        .table1 td, .table1 th {
            border: 0px solid #cad9ea;
            padding: 3px 1em 0;
        }

        .table1 tr.alter {
            background-color: #f5fafe;
        }

        :root {
            --height: 100px;
            --width: 200px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            font-family: sans-serif;
        }

        input {
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            padding-left: 5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        .demo{width:360px; margin:20px auto 0 auto; height:70px;}
        .button {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover {
            text-decoration: none;
        }
        .button:active {
            position: relative;
            top: 1px;
        }
        .bigrounded {
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }
        .medium {
            font-size: 12px;
            padding: .4em 1.5em .42em;
        }
        .small {
            font-size: 11px;
            padding: .2em 1em .275em;
        }


        /* blue */
        .blue {
            color: #d9eef7;
            border: solid 1px #0076a3;
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
            background: -moz-linear-gradient(top,  #00adee,  #0078a5);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
        }
        .blue:hover {
            background: #007ead;
            background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
            background: -moz-linear-gradient(top,  #0095cc,  #00678e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
        }
        .blue:active {
            color: #80bed6;
            background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
            background: -moz-linear-gradient(top,  #0078a5,  #00adee);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
        }
        /* green */
        .green {
            color: #e8f0de;
            border: solid 1px #538312;
            background: #64991e;
            background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
            background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
        }
        .green:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }
        .green:active {
            color: #a9c08c;
            background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
            background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
        }
    </style>
</head>

<body>
<div class="topnav">
    <nav>
        <div class="nav_l" th:unless="${session.user.getUserId()}">
            <span>欢迎</span>
            <a class="log" href="#">登录</a>
            <span class="liner">|</span>
            <a href="#">免费注册</a>
        </div>
        <div class="nav_r" th:if="${session.user.getUserId()}">
            <a th:href="@{/myorder(userId=${session.user.getUserId()})}">我的订单</a>
            <span class="liner">|</span>
            <a href="update" class="myself">个人中心</a>

        </div>
        <span id="s_traingal"></span>

    </nav>

</div>
<header>

</header>
<main>
    <div class="show">
        <div class="top">
            <p>
            </p>
            <p>
            </p>
        </div>
        <form action="createOrder" method="post" th:action="@{/orderconfirm}">

            <table width="90%" class="table1">
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>


                <input type="hidden" name="roomId" th:value="${room.roomId}">
                <input type="hidden" name="bedType" th:value="${bedType}">
                <input type="hidden" name="hotelName" th:value="${hotelName}">
                <input type="hidden" name="hotelId" th:value="${room.hotelId}">
                <input type="hidden" name="roomName" th:value="${room.name}">
                <input type="hidden" name="room_num" id="room_num">
                <input type="hidden" name="roomCount" id="roomCount" value="1">
                <input type="hidden" name="fprice" id="orderPrice" th:value="${price}">

                <tr class="alter">
                    <th></th>
                    <th th:rowspan="6" colspan="2" }>你的预订</th>
                    <th th:rowspan="6" colspan="3"><img th:src="${photo}"></th>
                    <th></th>   <!--th:src="${room.photo1}"-->
                </tr>
                <tr class="alter">
                    <th></th>
                    <th></th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th></th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th></th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th></th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th th:rowspan="3" colspan="2">预订信息</th>
                    <th>房间信息</th>
                    <th colspan="3">
                        <text th:text="${hotelName}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        房间:&nbsp;<text th:text="${roomName}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        床型:&nbsp;<text th:text="${bedType}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        单价:&nbsp;<text th:text="${price}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                        ${'#room.hotelId'}
                    </th>
                </tr>

                <tr class="alter">
                    <th></th>
                    <th>入住时间</th>
                    <th>
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-prepend input-group">
                                    <span class="add-on input-group-addon"><i
                                            class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input
                                        type="text" readonly="readonly" style="width: 200px" name="startdata"
                                        class="form-control" value="10/23/2019"/>
                                </div>
                            </div>
                        </div>
                    </th>
                    <th>
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-prepend input-group">
                                    <span class="add-on input-group-addon"><i
                                            class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input
                                        type="text" readonly="readonly" style="width: 200px" name="lastdata"
                                        class="form-control" value="11/03/2019"/>
                                </div>
                            </div>
                        </div>

                    </th>
                </tr>
                <tr class="alter">
                    <th></th>
                    <th>房间数量</th>
                    <th>
                        <div class="btn-group">
                            <button id="oneRoom" type="button" class="btn btn-default">1</button>
                            <button id="twoRoom" type="button" class="btn btn-default">2</button>
                            <button id="threeRoom" type="button" class="btn btn-default">3</button>
                            <button id="fourRoom" type="button" class="btn btn-default">4</button>
                        </div>
                    </th>
                    <th><a type="text" id="priceItem" th:text="${price}"></a></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>

                <tr class="alter">
                    <th></th>
                    <th th:rowspan="4" colspan="2">入住信息</th>
                    <th>入住人</th>
                    <th><input type="text" placeholder="请输入姓名" id="name" name="name"></th>
                    <th th:colspan="2">
                    </th>
                </tr>

                <tr class="alter">
                    <th></th>
                    <th>联系电话</th>
                    <th><input name="phone" placeholder="请输入联系电话" type="text"
                               pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$"
                               id="phone"></th>
                    <th></th>
                    <th></th>
                </tr>

            </table>

            <table width="90%" class="table1">
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    </th>
                    <th></th>
                    </th>
                    <th></th>
                    <th>
                        <div class="demo">
                            <!--<input class="button green" type="button" value="取消订单"  th:href="/back"></button>-->
                            <a href="#" class="button green"  th:href="@{/myorder(userId=${room.hotelId})}">取消订单</a>
                        </div>
                    </th>
                    <th>
                        <div class="demo">
                            <button class="button blue" type="submit" >提交订单</button>
                        </div>
                    </th>

                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </table>
        </form>

    </div>
    <footer>
        <div class="promise">
        </div>
        <div class="full">
            <ul>
                <li></li>
                <li>100%正品保证</li>
                <li></li>
                <li>快速配送服务</li>
                <li></li>
                <li>运费满额减免</li>
                <li></li>
                <li>7天退换货无忧</li>
                <li></li>
                <li>保税仓直发</li>
            </ul>
        </div>
        <div class="last">
            <div class="last_l">
                <p>
                    <span>在线搜索</span>
                    <span class="liner">|</span>
                    <span>快捷支付</span>
                </p>
                <p>
                    <a href="http://jira2.suncaper.net/projects/TEAM16/issues/TEAM16-62?filter=allopenissues">关于我们</a>
                    <span class="liner">|</span>
                    <a href="http://jira2.suncaper.net/projects/TEAM16/issues/TEAM16-62?filter=allopenissues">加入</a>

                </p>
                <p>© Team16 酒店辅助订购系统
                </p>
            </div>
            <div class="last_right">
                <div class="images">

                    <span>Team </span>
                    <span>酒店辅助订购</span>
                </div>
            </div>
        </div>
    </footer>
</main>
<div class="well">


    <script>

        var price = [[${fprice}]];

        $('#r1').click(function () {
            $("#priceItem").text("总计" + price + "元");
            $("#priceItem").value(price);
            $("#roomCount").value('1');
            $("#fprice").value(price);
        })
        $('#r2').click(function () {
            $("#priceItem").text("总计" + price * 2 + "元");
            $("#priceItem").value(price * 2);
            $("#roomCount").value('2');
            $("#fprice").value(price * 2);
        })
        $('r3').click(function () {
            $("#priceItem").text("总计" + price * 3 + "元");
            $("#priceItem").value(price * 3);
            $("#roomCount").value('3');
            $("#fprice").value(price * 3);
        })
        $('r4').click(function () {
            $("#priceItem").text("总计" + price * 4 + "元");
            $("#priceItem").value(price * 4);
            $("#roomCount").value('4');
            $("#fprice").value(price * 4);
        })
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#birthday').daterangepicker({singleDatePicker: true}, function (startdata, lastdata, label) {
                console.log(startdata.toISOString(), lastdata.toISOString(), label);
            });
        });
    </script>

    <script>
        function back(id){
         location.href="orderpay?roomId="+id;
        }
    </script>
</div>
</body>


</html>
